<script setup lang="ts">
  import { loginByCodeAPI, sendCodeAPI } from '@/api'
  import { PAGE_PATH } from '@/constants'
  import { useTokenStore } from '@/store/token'
  import { SendCode } from '@/types/enum'
  import type { LoginMobileParams } from '@/types/user'
  import { ref } from 'vue'

  // 样式设置
  defineOptions({
    options: {
      styleIsolation: 'shared',
    },
  })
  // 是否显示倒计时
  const formRef = ref()
  const agree = ref(false)
  const count = ref(60)
  const tokenStore = useTokenStore()
  const loginForm = ref<LoginMobileParams>({
    mobile: '',
    code: '',
  }) // 声明登录表单
  // 声明规则
  const loginRules = {
    mobile: {
      rules: [
        {
          required: true,
          errorMessage: '请输入手机号',
        },
        {
          pattern: /^1[3-9]\d{9}$/,
          errorMessage: '手机号格式不正确',
        },
      ],
    },
    code: {
      rules: [
        {
          required: true,
          errorMessage: '请输入手机验证码',
        },
        {
          pattern: /^\d{6}$/,
          errorMessage: '验证码格式不正确',
        },
      ],
    },
  }
  // 登录表单校验
  const login = async () => {
    await formRef.value.validate()
    // 再去检查一下是否勾选
    if (!agree.value) {
      uni.showToast({ title: '您未勾选用户平台协议', icon: 'none' })
      return
    }
    const res = await loginByCodeAPI(loginForm.value)
    // token存入pinia
    tokenStore.setToken(res.token) // 写入token
    //写入userId
    tokenStore.setUserId(res.id!)
    // uni.navigateBack() // 返回上一个页面
    uni.switchTab({
      url: PAGE_PATH.HOME_PAGE,
    })
  }

  const sendCode = async () => {
    await formRef.value.validateField('mobile')
    count.value -= 1 // 先减去1 开始倒计时
    const res = await sendCodeAPI({ mobile: loginForm.value.mobile, type: SendCode.LOGIN })
    // uni.showToast({ title: res.code })
    loginForm.value.code = res.code // 验证码自动填入
  }
  // 时间到了自动结束
  const updateTime = () => {
    // console.log('更新时间')
    count.value = 60 // 回到60就可以
  }
  const changeValue = () => {
    agree.value = !agree.value
  }
</script>

<template>
  <!-- uni-forms rules model ref -->
  <uni-forms ref="formRef" :model="loginForm" :rules="loginRules" class="login-form">
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        v-model="loginForm.mobile"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入验证码"
        v-model="loginForm.code"
        placeholder-style="color: #C3C3C5"
      />
      <text class="text-button" @click="sendCode" v-if="count === 60">获取验证码</text>
      <uni-countdown
        v-else
        :show-day="false"
        :show-hour="false"
        :show-minute="false"
        :show-colon="false"
        @timeup="updateTime"
        :second="count"
      />
    </uni-forms-item>

    <view class="agreement">
      <radio :checked="agree" @click="changeValue" color="#16C2A3" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="login">登 录</button>
  </uni-forms>
</template>
<style lang="scss">
  @import './styles.scss';
</style>
